<template>
  <ul class="list">
    <!-- https://www.jianshu.com/p/16d3e4f9b2a9 -->
    <!-- @touchstart  这个事件是fastclick里面的东西 -->
    <!-- 下面这是用来处理滑动事件的，不仅仅是点击事件 -->
    <!--  https://blog.csdn.net/u010018421/article/details/53700589  -->
    <!--  移动端没有鼠标点击事件只有触摸事件:(touchstart,touchmove,touchend)，
pc端:(mousedown,mousemove,mouseup,mouseleave)  -->
    <!-- 在移动端，手指点击一个元素，会经过：touchstart > touchmove > touchend 》click。
     @touchstart.prevent  阻止浏览器默认行为，因为真机测试的时候，有这个bug,滑动字母会跟屏幕一起滚动
     -->
    <li class="item" v-for="(key,index) in letters" :key="key"
        :ref="key"
      @touchstart.prevent="handleTouchStart"
      @touchmove="handleTouchMove($event,key)"
      @touchend="handleTouchEnd"
      @click="handleLetterClick($event,key,index)"
    >{{key}}</li>

  </ul>
</template>

<script>
export default {
  name: 'CityAlphabet',
  props: {
    cities: Object
  },
  computed: {
    letters () {
      const letters = []
      for (let i in this.cities) {
        letters.push(i)
      }
      return letters
    }
  },
  data () {
    return {
      touchStatus: false,
      //  开始的偏移值
      startY: 0,
      timer: null
    }
  },
  updated () {
    this.startY = this.$refs['A'][0].offsetTop
  },
  methods: {
    handleLetterClick (e,key,index) {
      // alert(key);
      // console.log(e);
      // console.log(key+'  '+index);
      // console.log(e.target.innerText);
      this.$emit('clickAlphabet', {key:key,index:index})
    },
    handleTouchStart () {
      // console.log('点击事件开始')
      this.touchStatus = true
    },
    handleTouchMove (e,key) {
      /*
      console.log('滑动事件发生.只会出现首次点击的元素，滑动过程中并不改变，但是可以获取鼠标的当前位置')
      console.log('..这个东西不就是鼠标移动事件么。。')
      console.log(key)
      console.log(e.target)
      if (this.touchStatus) {
        // 获取原生dom元素
        // const ele=this.$refs[key][0];
        // A字母元素的位置
        const ele=this.$refs['A'][0];
        //  请看这个笔记搜索，，这个是带有滚动条的元素的可视区域的区域的宽x高yclientY
        //  定位的宽高，offesetTop  Y  最进的定位的父元素到子元素(本)边框到边框的距离(坐标值)
        //L:\娱乐I盘\PHP和H5\龙天王2016传智播客WEB前端开发视频教程\课件\框架\01 框架第一天\事件框架 2016-01-12\04 CSS样式框架\03 高度宽度\01 原生高度和宽度.html
        //C:\app\IDEA_project\chatro\src\main\webapp\复习.md
        const startY=ele.offsetTop;
        // startY  是元素起点的坐标
        // 79是绝对定位的坐标  e.touches[0].clientY 是当前触摸滑到的位置的坐标
        // touchY 就是划过的长度
        //  向下取整
        const touchY=e.touches[0].clientY-79;
        console.log("看看事件里面有啥");
        console.log(e);
        // 20是每个字母的高度。。
        const index=Math.floor((touchY-startY)/20);
        // const index=Math.floor((touchY)/20);
        //  index就是当前字母所在的索引。。根据距离来算的。。
        // console.log(ele)
        // console.log(startY)
        console.log(index)
        // index为负值，代表往上滑动，为正值代表往下滑动，
        //  直接用 touchY除以20  不是更加的好么。。不行，因为居中了，你无法知道居中的位置
        //  但是你可以用A字母的位置呀
        if(index>=0&&index<this.letters.length){
          this.$emit('clickAlphabet',{key:this.letters[index],index:index});
        }
        }
*/
        //性能优化  增加了updated钩子，来直接缓存A的坐标，而不是每触摸移动一像素就调用触摸事件方法
        //并且设定16毫秒执行一次
      if (this.touchStatus) {
        if (this.timer) {
          clearTimeout(this.timer)
        }
        this.timer = setTimeout(() => {
          // console.log('滑动事件发生')
          const touchY = e.touches[0].clientY - 79
          const index = Math.floor((touchY - this.startY) / 20)
          if (index >= 0 && index < this.letters.length) {
            this.$emit('clickAlphabet', {key: this.letters[index], index: index});
          }
        }, 16)
      }

    },
    handleTouchEnd () {
      // console.log('点击事件结束')
      this.touchStatus = false
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  .list
    /*  采用弹性盒子布局，这种布局真方便很强大 */
    position absolute
    top 1.58rem
    right 0
    bottom 0
    width .4rem
    display flex
    flex-direction column
    justify-content: center
    .item
      color green
      line-height .4rem
      font-size .3rem
/*  .list
    display: flex
    flex-direction: column
    justify-content: center
    position: absolute
    top: 1.58rem
    right: 0
    bottom: 0
    width: .4rem
    .item
      line-height: .4rem
      text-align: center
      color: $bgColor*/
</style>
